import React from 'react';
import { Button } from '@/components/ui/Button';

export const NotFoundPage: React.FC = () => {
  return (
    <div className="min-h-screen flex items-center justify-center bg-gray-50">
      <div className="text-center">
        {/* 404 图标 */}
        <div className="mb-8">
          <svg
            className="mx-auto h-32 w-32 text-gray-400"
            fill="none"
            stroke="currentColor"
            viewBox="0 0 24 24"
          >
            <path
              strokeLinecap="round"
              strokeLinejoin="round"
              strokeWidth={1}
              d="M9.172 16.172a4 4 0 015.656 0M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"
            />
          </svg>
        </div>

        {/* 标题和描述 */}
        <h1 className="text-6xl font-bold text-gray-900 mb-4">404</h1>
        <h2 className="text-2xl font-semibold text-gray-700 mb-4">页面未找到</h2>
        <p className="text-lg text-gray-600 mb-8 max-w-md mx-auto">
          抱歉，我们找不到您要访问的页面。请检查URL是否正确，或者返回首页。
        </p>

        {/* 操作按钮 */}
        <div className="flex flex-col sm:flex-row gap-4 justify-center items-center">
          <Button
            onClick={() => window.history.back()}
            variant="outline"
          >
            返回上一页
          </Button>
          
          <Button
            onClick={() => window.location.href = '/'}
          >
            返回首页
          </Button>
        </div>

        {/* 有用的链接 */}
        <div className="mt-12 pt-8 border-t border-gray-200">
          <p className="text-sm text-gray-500 mb-4">您可能想要访问：</p>
          <div className="flex flex-wrap gap-4 justify-center">
            <a
              href="/color-picker"
              className="text-blue-600 hover:text-blue-800 text-sm underline"
            >
              色彩选择器
            </a>
            <a
              href="/recommendations"
              className="text-blue-600 hover:text-blue-800 text-sm underline"
            >
              推荐搭配
            </a>
            <a
              href="/history"
              className="text-blue-600 hover:text-blue-800 text-sm underline"
            >
              历史记录
            </a>
            <a
              href="/analytics"
              className="text-blue-600 hover:text-blue-800 text-sm underline"
            >
              数据分析
            </a>
          </div>
        </div>
      </div>
    </div>
  );
};